<template>
    <div class="header" :class="{active:isActive}">
        <div class="start">
            <div class="title">
                <img src="../../assets/logo.png" alt="人工智能应用技术创新中心" height="50px">
                <span>人工智能应用技术创新中心</span>
            </div>
            <div class="phone">
                <span>177 5492 8306</span>
            </div>
            <div class="nav">
                <ul class="nav_ul">
                    <li v-for="(item,index) in navigation" :key="index">
                        <router-link :to="item.url">{{item.name}}</router-link>
                        <ul class="upload">
                            <li v-for="(list,num) in item.list" :key="num" class="wp">
                                <router-link :to="list.urls" class="s" >{{list.name}}</router-link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "S_head",
        data(){
            return{
                isActive:false,
                scrollTop:'0',
                navigation:[
                    {
                        name:'首页',
                        url:'/main'
                    },
                    {
                        name:'企业简介',
                        url:'/about/intro',
                        list:[
                            {
                                name:'公司简介',
                                urls:'/about/intro'
                            },
                            {
                                name:'企业文化',
                                urls:'/about/culture'
                            }
                        ]
                    },
                    {
                        name:'新闻中心',
                        url:'/news/1',
                        list:[
                            {
                                name:'公司新闻',
                                urls:'/news/1'
                            },
                            {
                                name:'行业新闻',
                                urls:'/news/0'
                            }
                        ]
                    },
                    {
                        name:'作品案列',
                        url: '/Results/0'
                    },
                    {
                        name:'服务项目',
                        url: '/service'
                    },
                    {
                        name:'知识在线',
                        url:'/knowledge/0'
                    }

                ],
            }
        },
        mounted() {
            window.addEventListener('scroll',this.scrollToTop);
        },
        methods:{
            scrollToTop(){
                const that=this;
                let scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
                that.scrollTop=scrollTop;
                if(that.scrollTop>20){
                    this.isActive=true;
                    // document.getElementsByTagName('body').scrollTop='0';
                }else{
                    this.isActive=false;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .header{
        height: 72px;
        width: 100%;
        min-width: 1300px;
        /*background: #090b1a;*/
        background: none;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        z-index: 999;
        transition: .5s ease-in-out;
        &:hover{
            background: #1C2139;
        }
        .start{
            width: 1200px;
            height: 72px;
            margin: 0 auto;
            line-height: 72px;
            .title{
                box-sizing: border-box;
                margin-right: 0;
                /*height: 72px;*/
                display: flex;
                align-items: center;
                width: 400px;
                float: left;
                /*display: inline-block;*/
                span{
                    color: white;
                    font-size: 20px;
                    margin-left: 17px;
                }
            }
            .phone{
                height: 72px;
                line-height: 72px;
                float: right;
                span{
                    color: white;
                    font-size: 18px;
                    background: url("../../assets/header-tel.png") no-repeat left center;
                    padding-left: 32px;
                }
            }
            .nav{
                float: right;
                width: 640px;
                text-align: right;
                /*height: 72px;*/
                margin: 0 !important;
                display: flex;
                align-items: center;

                li{
                    display: inline-block;
                    zoom: 1;
                    margin: 0 -2px;
                    position: relative;
                    box-sizing: border-box;
                    z-index: 100;

                    a{
                        display: block;
                        /*line-height: 72px;*/
                        padding: 0 20px;
                        font-size: 16px;
                        color: white;
                        text-decoration: none;
                    }
                    &:hover ul{
                        display: block;
                    }
                }

            }
            .upload{
                /*width: 70px;*/
                display: none;
                position: absolute;
                transition: .5s ease-in-out;

                /*height: 72px;*/
                /*top: 72px;*/
                padding: 0;
                z-index: 100;
                background-color: #12152c;
                line-height: 0 !important;
                .wp{
                    height: 40px !important;
                    &:hover{
                        background-color: #1e214f;
                    }
                    .s{
                        height: 40px !important;
                        line-height: 40px;
                        text-align: center;
                        /*!*width: 100px;*!*/
                        /*margin-left: 0;*/
                        /*!*display: block;*!*/
                        /*!*line-height: 72px;*!*/
                        /*!*padding: 0 20px;*!*/
                        /*font-size: 16px;*/
                        /*color: white;*/
                        /*!*text-decoration: none;*!*/
                        /*&:hover{*/
                        /*    !*background-color: #2a2d42;*!*/
                        /*}*/

                    }
                }
            }
        }
    }

.active{
    background: #090b1a;
    opacity: 0.9;
}
    ul{
        margin: 0;
    }
</style>
